<template>
  <div class="calendar">
    <div class="calendar-box">
      <FullCalendar :options="calendarOptions" ref="fullCalendar" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import FullCalendar from '@fullcalendar/vue3'
// 检测dateClick操作、 可选操作以及 事件拖放和调整大小时需要。
import interactionPlugin from '@fullcalendar/interaction';
// 提供月度和每日网格视图 
import dayGridPlugin from '@fullcalendar/daygrid'; // for dayGridMonth v


let fullCalendar = ref(null)
const handleDateClick = (arg) => {
  const title = prompt('输入事件标题')
  if (title) {
    fullCalendar.value.getApi().addEvent({
      title,
      start: arg.dateStr,
      allDay: arg.allDay
    })
  }
}
const handleEventClick = (info) => {
  if (confirm(`删除 "${info.event.title}" 事件？`)) {
    info.event.remove()
  }
}

let calendarOptions = ref({
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek,dayGridDay'
  },
  // events: [
  //   {
  //     title: '团队周会',
  //     start: new Date().toISOString().slice(0, 10),
  //     color: '#3b82f6'
  //   },
  //   {
  //     title: '项目里程碑',
  //     start: '2024-03-15',
  //     end: '2024-03-18',
  //     color: '#10b981'
  //   }
  // ],
  // dateClick: handleDateClick,
  // eventClick: handleEventClick,
  editable: true
})



// 引入组件



</script>

<style lang="scss" scoped>
.calendar {
  .calendar-box {
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;

    margin: 0 auto;
    padding: 20px;
  }
}
</style>
